<template>
  <div class="screen-item">
    <transition
    >
      <keep-alive include="WestFundPage,WestGoldPage,WestExchangePage,WestCrudePage,WestStockPage,ImageSwiper">
        <component v-if="index !== -1" :is="itemName" :dataList="dataList" :itemIndex="itemIndex" @changeIndex="changeIndex"></component>
      </keep-alive>
    </transition>
    <div class="clock-item1" :style="{backgroundImage: 'url('+backImage+')'}">
      <clock :radius="radius" :nowTime="nowTime"></clock>
    </div>
    <div class="date-item1">
      <p class="date">&nbsp;{{monthStr}}-{{dateStr}}&nbsp;&nbsp;{{week}}&nbsp;&nbsp;{{nongli}}</p>
    </div>
    <div class="date-item">
      <p class="date">&nbsp;{{monthStr}}-{{dateStr}}&nbsp;&nbsp;{{week}}&nbsp;&nbsp;{{nongli}}</p>
    </div>
    <div class="clock-item" :style="{backgroundImage: 'url('+rightBackImage+')'}">
      <clock :radius="radius" :nowTime="nowTime"></clock>
    </div>
    <img src="static/images/line.png" class="line1">
    <img src="static/images/line.png" class="line2">
    <img src="static/images/line.png" class="line3">
    <img src="static/images/line.png" class="line4">
  </div>
</template>
<script>
import DailyDataTable from './components/DailyDataTable'
import WestFundPage from './components/WestFundPage'
import WestExchangePage from './components/WestExchangePage'
import WestCrudePage from './components/WestCrudePage'
import WestGoldPage from './components/WestGoldPage'
import WestStockPage from './components/WestStockPage'
import ImageSwiper from './components/ImageSwiper'
import {httpHost} from '@/assets/requestData.js'
import axios from 'axios'
import $ from 'jquery'
import {showCal} from '@/assets/today.js'
import Clock from './components/clock/Clock'
export default {
  name: 'WestRunningScreen',
  components: {
    DailyDataTable,
    WestFundPage,
    WestExchangePage,
    WestCrudePage,
    WestGoldPage,
    WestStockPage,
    ImageSwiper,
    Clock
  },
  data () {
    return {
      index: -1,
      getDataTimer: null,
      writeDateTimer: null,
      tempFundList: null,
      tempStockList: null,
      tempExchageList: null,
      tempCrudeList: null,
      tempGoldList: null,
      firstVisit: true,
      fundList: [],
      stockList: [],
      exchageList: [],
      crudeList: [],
      goldList: [],
      imageList: [
        // 'file:///D:\\Users\\Lenovo\\Desktop\\images\\51.jpg',
        // 'file:///D:\\Users\\Lenovo\\Desktop\\images\\52.png',
        // 'file:///D:\\Users\\Lenovo\\Desktop\\images\\53.jpg',
        // 'file:///D:\\Users\\Lenovo\\Desktop\\images\\54.jpg',
        // 'file:///D:\\Users\\Lenovo\\Desktop\\images\\55.jpg',
        // 'file:///D:\\Users\\Lenovo\\Desktop\\images\\56.jpg'
      ],
      itemList: [
        {
          index: 1,
          itemName: 'WestFundPage',
          dataListName: 'fundList'
        },
        {
          index: 2,
          itemName: 'WestStockPage',
          dataListName: 'stockList'
        },
        {
          index: 3,
          itemName: 'WestExchangePage',
          dataListName: 'exchageList'
        },
        {
          index: 4,
          itemName: 'WestCrudePage',
          dataListName: 'crudeList'
        },
        {
          index: 5,
          itemName: 'WestGoldPage',
          dataListName: 'goldList'
        }
        // {
        //   index: 0,
        //   itemName: 'ImageSwiper',
        //   dataListName: 'imageList'
        // }
      ],
      monthStr: '',
      dateStr: '',
      week: '',
      nongli: '',
      month: '',
      radius: 222,
      backImage: 'static/images/clock.png',
      rightBackImage: 'static/images/clock2.png',
      year: '',
      sceneId: 0,
      nowTime: new Date()
    }
  },
  computed: {
    itemName () {
      return this.itemList[this.index].itemName
    },
    itemIndex () {
      return this.itemList[this.index].index
    },
    dataList () {
      return this[this.itemList[this.index].dataListName]
    }
  },
  methods: {
    changeIndex () {
      this.fundList = this.tempFundList
      this.stockList = this.tempStockList
      this.exchageList = this.tempExchageList
      this.goldList = this.tempGoldList
      this.crudeList = this.tempCrudeList
      if (this.index < this.itemList.length - 1) {
        this.index++
      } else {
        this.index = 0
      }
    },
    getFunincialData () {
      // console.log('get data')
      // axios.get('api/financialData.json').then(this.getResSucc)
      axios.post(httpHost + '/financial/getRealtimeFormDataByGroup' + '?sceneId=' + this.sceneId).then(this.getResSucc)
      if (this.firstVisit) {
        var this_ = this
        setTimeout(function () {
          this_.getResDataFromC()
          this_.firstVisit = false
          this_.changeIndex()
        }, 3000)
      }
    },
    getResSucc (res) {
      // save to C client  存数据到c端
      if (res.data) {
        var data = res.data
        if (data.success === true) {
          // console.log(data)
          try {
            window.external.WriteFile('financialData', JSON.stringify(data))
          } catch (error) {
            window.external.WriteLog('WestScreen getResSucc error:' + error)
          }
          // this.tempFundList = data.fund
          // this.tempStockList = data.stock
          // this.tempExchageList = data.exChange
          // this.tempCrudeList = data.futures
          // this.tempGoldList = data.golden
        }
      }
    },
    evil (fn) {
      var Fn = Function
      return new Fn('return ' + fn)()
    },
    getResDataFromC () {
      var result = this.evil(window.external.GetJsonContextWithJsonName('financialData'))
      this.tempFundList = result.fund
      this.tempStockList = result.stock
      this.tempExchageList = result.exChange
      this.tempCrudeList = result.futures
      this.tempGoldList = result.golden
    },
    getCData () {
      if (this.getDataTimer) {
        clearTimeout(this.getDataTimer)
      }
      var this_ = this
      this.getDataTimer = setTimeout(function () {
        // 继续定时启动
        this_.getCData()
        // 取得数据
        try {
          this_.getResDataFromC()
        } catch (error) {
          window.external.WriteLog('WestScreen getCData error:' + error)
        }
      }, 50000)
    },
    saveCData () {
      if (this.writeDateTimer) {
        clearTimeout(this.writeDateTimer)
      }
      var this_ = this
      this.writeDateTimer = setTimeout(function () {
        this_.saveCData()
        try {
          this_.getFunincialData()
        } catch (error) {
          window.external.WriteLog('WestScreen saveCData error:' + error)
        }
      }, 60000)
    },
    getDate () {
      if (this.dateTimer) {
        clearTimeout(this.dateTimer)
      }
      let this_ = this
      this.dateTimer = setTimeout(function () {
        this_.getDate()
        try {
          this_.getDateTime()
        } catch (error) {
          window.external.WriteLog('WestScreen getDate error:' + error)
        }
      }, 1000 * 60 * 30)
    },
    getDateTime () {
      var date = new Date()
      this.year = date.getFullYear()
      if (date.getMonth() < 10) {
        this.monthStr = date.getFullYear() + '-0' + (date.getMonth() + 1)
        this.month = '0' + (date.getMonth() + 1)
      } else {
        this.monthStr = date.getFullYear() + '-' + (date.getMonth() + 1)
        this.month = (date.getMonth() + 1)
      }
      if (date.getDate() < 10) {
        this.dateStr = '0' + date.getDate()
      } else {
        this.dateStr = date.getDate()
      }
      var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.week = weeks[date.getDay()]
      this.nongli = '农历' + showCal()

      axios.post(httpHost + '/publicAPI/publicInterface?Tasktype=GetServerTime').then(this.getTimeSucc)
    },
    getTimeSucc (res) {
      try {
        if (res.data) {
          var data = res.data
          if (data.flag === true) {
            var time = data.time
            var timeStr = time.slice(0, 4) + '/' + time.slice(4, 6) + '/' + time.slice(6, 8) + ' ' + time.slice(8, 10) + ':' + time.slice(10, 12) + ':' + time.slice(12, 14)
            this.nowTime = new Date(timeStr)
          }
        }
      } catch (error) {
        window.external.WriteLog('WestScreen getTimeSucc error:' + error)
      }
    },
    getSceneId () {
      let this_ = this
      var url = '../GGWisdom/GGIBMS/Json/' + this.$route.params.jsonName
      $.ajax({
        // url: '../GGWisdom/GGIBMS/Json/1532310126840_12.json',
        url: url,
        type: 'GET',
        dataType: 'JSON',
        success (data) {
          this_.sceneId = data.scenes[0].id
        },
        error (error) {
          window.external.WriteLog('westScreen getSceneId error:' + error)
        }
      })
    },
    getImageList () {
      let this_ = this
      var jsonUrl = '../GGWisdom/GGIBMS/Json/' + this.$route.params.jsonName
      $.ajax({
        url: jsonUrl,
        type: 'GET',
        dataType: 'JSON',
        success (data) {
          var contentHtml = this_.evil(data.scenes[0].contentHtml)
          var components = contentHtml.pages[0].components
          for (var i = 0; i < components.length; i++) {
            if (components[i].name === 'Picture') {
              var resourceUrl = components[i].ResourceUrl
              var urlList = resourceUrl.split(',')
              this_.imageList = []
              for (var j = 0; j < urlList.length; j++) {
                var url = '../GGWisdom/GGIBMS/Image' + urlList[j].slice(urlList[j].indexOf('/img') + 4, urlList[j].length)
                this_.imageList.push(url)
              }
            }
          }
        },
        error () {
          console.log('err')
        }
      })
    }
  },
  mounted () {
    // this.getSceneId()
    this.sceneId = this.$route.params.sceneId
    var this_ = this
    setTimeout(function () {
      this_.getFunincialData()
    }, 2000)
    // this.index = 0
    this.saveCData()
    this.getCData()
    this.getDateTime()
    this.getDate()
  }
}
</script>
<style lang="stylus" scoped>
  .screen-item
    width: 5760px
    height: 240px
    transform: scale(0.3333,1);
    transform-origin: 0 0;
    overflow-x: hidden
    overflow-y: hidden
    .line1
      position:absolute
      left: 2700px
      top: 97px
      width: 580px
    .line2
      position:absolute
      left: 2700px
      top: 220px
      width: 580px
    .line3
      position:absolute
      left: 200px
      top: 102px
      width: 380px
    .line4
      position:absolute
      left: 200px
      top: 220px
      width: 380px
    .clock-item
      position:absolute
      left: 2480px
      top: 10px
      width: 222px
      height: 222px
      background-size: cover
    .clock-item1
      position:absolute
      left: -10px
      top: 10px
      width: 222px
      height: 222px
      background-size: cover
    .date-item,.date-item1
      position: absolute
      left: 2480px
      color: white
      top: 150px
      width: 700px
      height: 50px
      display: flex
      flex-direction: column
      justify-content: center
      align-items: flex-end
      font-size: 28px
      .time
        display: flex
        justify-content: center
        align-items: center
        >img
          width: 50px
          padding-right: 10px
        >span
          font-size: 100px
          padding-left: 10px
          padding-right: 10px
      .date
        padding-top: 40px
    .date-item1
      left: -80px
      font-size: 27px
</style>
